<template>
<div class="knowledgeBase">
  <el-row>
    <el-col :span="3">
      <div class="left-tree">
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" style="margin: 10px">
          <span slot-scope="{ node, data}">
            <span>
              <i class="el-icon-folder-opened" style="color: #FEC171"></i>{{node.label}}
            </span>
          </span>
        </el-tree>
      </div>
    </el-col>
    <el-col :span="21">
      <div class="right-tree">
        <knowledge-list></knowledge-list>
      </div>
    </el-col>
  </el-row>
</div>
</template>

<script>
import KnowledgeList from "@/views/integrated/components/knowledgeList";
export default {
  name: "knowledgeBase",
  components: {KnowledgeList},
  data(){
    return{
      data: [{
        label: '我的文档',
      }, {
        label: '共享管理',
        children: [{
          label: '我共享的',
          icon:'el-icon-folder-opened'
        }, {
          label: '他人共享的',
          icon:'el-icon-folder-opened'
        }]
      }, {
        label: '文档库',
        children: [{
          label: '项目文档',
          icon:'el-icon-folder-opened',
          children: [{
            label: '防沙治沙',
            icon:'el-icon-folder-opened',
          },{
            label: '绿化改造',
            icon:'el-icon-folder-opened'
          },{
            label: '苗木栽培',
            icon:'el-icon-folder-opened'
          },{
            label: '机器人造林',
            icon:'el-icon-folder-opened'
          },]
        }, {
          label: '会议档案',
          icon:'el-icon-folder-opened'
        },{
          label: '公文档案',
          icon:'el-icon-folder-opened'
        }]
      },{
        label: '视频广场',
        icon:'el-icon-folder-opened',
        children: [{
          label: '项目视频',
          icon:'el-icon-folder-opened'
        }, {
          label: '学习视频',
          icon:'el-icon-folder-opened'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    }
  }
}
</script>

<style scoped>
.knowledgeBase{
  margin: 16px;
}
.left-tree{
  width: 100%;
  height: calc(100vh - 10px);
  overflow: auto;
  box-shadow: 0 0 14px 0 rgba(28, 111, 236, .15);
  color: #555;
  background-color: #fff;
}
.right-tree{
  margin-left: 16px;
}
</style>
